<template>
  <!--复选框-->
  <el-checkbox-group :id="name" size="small" v-model="valueModel" :placeholder="placeholder" @change="onChange">
    <el-checkbox v-for="(option, index) in options_" :label="option.value" :key="option.value">
      <slot :option="option" :index="index">
        {{ option.label }}
      </slot>
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import {InputType} from "@/lang/fast-form";
import DictionaryProvider from "../../provider/dictionary-provider";

/**
 * 复选框组件
 */
export default {
    name: "SmartCheckboxGroup"
    , inject: ['fast_form']
    , props: {
        // 字段名
        name: {type: String}
        // 默认值
        , value: {type: [String, Array], default: () => []}
        // 数据字典
        , options: {type: Array, default: undefined}
        // 文字提示
        , placeholder: {type: String, default: ''}

        // 请求参数
        , where: {type: Object, default: undefined}
        // 异步获取函数
        , provider: {type: Function, default: DictionaryProvider}
    }
    , watch: {
        value: {
            handler: function (val) {
                this.input.setFormatValue(val);
            }
        }
        , options: {
            handler: function (val) {
                this.setOptions(val)
            }
        }
        , where: {
            handler: function (val) {
                this.reload(val);
            }
        }
    }
    , data() {
        return {
            // 值模型，用于计算的值，任何时候都不允许为空，避免 vue 联动失效
            valueModel: []
            // fast-form 表单接口
            , input: undefined
            // 数据字典
            , options_: undefined

            // 数据加载状态
            , loading: undefined
        }
    }
    , created() {
        let input = this.fast_form.getFormInput(this.name);

        // 覆盖重写默认的函数
        input.wrap(InputType.CheckboxGroup);

        input.setDom(this);

        this.input = input;

        if (Layers.isNotBlank(this.options)) {
            // 下拉数据选项
            this.setOptions(this.options);
        } else if (Layers.isNotBlank(this.provider)) {
            // 查询远程数据字典
            this.reload();
        }

        // 首次渲染数据 & 触发数据联动
        input.setFormatValue(this.value);
    }
    , methods: {
        /**
         * 用户输入变换事件
         * @param val
         */
        onChange: function (val) {
            this.input.changeValue(val);
        }
        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        , onChangeValue: function (val) {
            this.valueModel = val;
        }

        /**
         * 设值数据字典
         * @param val 字典
         */
        , setOptions(val) {
            if (Layers.isEmpty(val)) {
                this.options_ = [];
            } else if (Layers.isArray(val)) {
                this.options_ = val;
            } else if (Layers.isString(val)) {
                this.reload(val);
            }
        }
        /**
         * 查询远程数据字典
         *
         * @param params 请求参数
         */
        , reload: function (params) {
            // 使用异步加载函数
            this.loading = true;
            this.provider(params).then(ret => {
                this.options_ = ret.list;
            }).finally(() => {
                this.loading = false;
            });
        }
    }
}
</script>
